<template>
  <div class="tab-container">
    <div style="color:red;padding-top:10px;padding-bottom:10px"> 选中 第一个tree   第二个只显示第一个选中的 别的不显示    点击第二个tree 就会显示第二个tree </div>
    <el-tree
      ref="tree"
      :data="dataData"
      show-checkbox
      node-key="id"
      :props="defaultProps"
      @check="subRoleTreeCheck"
    ></el-tree>
    <el-button @click="getCheckedNodes">通过 node 获取</el-button>
    <el-button @click="getCheckedKeys">通过 key 获取</el-button>
    <el-button @click="setCheckedNodes">通过 node 设置</el-button>
    <el-button @click="setCheckedKeys">通过 key 设置</el-button>
    <el-button @click="resetChecked">清空</el-button>
    <el-button @click="firstTreeFm">  第二个tree  </el-button>
   
     <el-tree
     v-if="statusBoole"
      ref="treeTree"
      :data="dataChange"
     
      node-key="id"
      :props="defaultProps"
      >
    </el-tree>


  </div>
</template>

<script>
//import TabPane from './components/TabPane'

export default {
  name: "Tab",
  //components: { TabPane },
  data() {
    return {
      dataData: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1"
                },
                {
                  id: 10,
                  label: "三级 1-1-2"
                }
              ]
            }
          ]
        },
        {
          id: 2,
          label: "一级 2",
          children: [
            {
              id: 5,
              label: "二级 2-1"
            },
            {
              id: 6,
              label: "二级 2-2"
            }
          ]
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1"
            },
            {
              id: 8,
              label: "二级 3-2"
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      },
      keyKey:[],
      statusBoole:false,
      dataChange:[],
      checkDataList:[]

    };
  },

  created() {
    
  },
  methods: {
    handleCheckChange(data, checked, indeterminate) {
      console.log(data, checked, indeterminate);
    },
    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
      this.keyKey=this.$refs.tree.getCheckedKeys()
    },
     firstTreeFm() {
        
        
        console.log('dddddddddddddddddddddd')
        // console.log(this.keyKey)
        // console.log(this.dataData)
        
        console.log( this.$refs.tree.getCheckedNodes() )
        console.log( this.$refs.tree.getCheckedKeys() )
        console.log( this.$refs.tree.getHalfCheckedNodes() )
        console.log( this.$refs.tree.getHalfCheckedKeys() )

        console.log( this.$refs.tree.getCurrentKey() )
        console.log( this.$refs.tree.getCurrentNode() )
        console.log( this.$refs.tree.getNode() )
      
        // this.dataChange=this.$refs.tree.getHalfCheckedNodes() 
        // this.checkDataList=this.$refs.tree.getHalfCheckedKeys()
        // this.statusBoole=true
        // console.log( this.dataChange )
        // console.log( this.checkDataList )
       
        let menuData = this.filterTreeArray(this.dataData,  this.checkDataList) 
        this.dataChange=  menuData
        this.statusBoole=true
        console.log(menuData)
        console.log('dddddddddddddddddddddd')
        
       
    },
    //获取所有选中的节点id
      subRoleTreeCheck(keys, leafOnly) {
          console.log(keys, leafOnly)
          //获取所有选中的节点id
          var tenantIdMenus = this.$refs.tree.getCheckedKeys().concat(this.$refs.tree.getHalfCheckedKeys()) 
          console.log(  tenantIdMenus, '选中的节点')
          this.checkDataList=tenantIdMenus

      },

       filterTreeArray(tree, bList) {
            return tree.filter(item => {
                return bList.indexOf(item.id) > -1
            }).map(item => {
                item = Object.assign({}, item)
                if (item.children) {
                    item.children = this.filterTreeArray(item.children, bList)
                }
                return item
            })
        },
   
    
    setCheckedNodes() {
      this.$refs.tree.setCheckedNodes([
        {
          id: 5,
          label: "二级 2-1"
        },
        {
          id: 9,
          label: "三级 1-1-1"
        }
      ]);
    },
    setCheckedKeys() {
      this.$refs.tree.setCheckedKeys([3]);
    },
    resetChecked() {
      this.$refs.tree.setCheckedKeys([]);
    }
  }
};
</script>

<style scoped>
.tab-container {
  margin: 30px;
}
</style>
